<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAlbumStore } from '../stores/album'
import { gsap } from 'gsap'

const albumStore = useAlbumStore()
const router = useRouter()
const albums = computed(() => albumStore.getAllAlbums())
const albumRefs = ref([])
const headerRef = ref(null)

const navigateToPhoto = (albumId: string | number, photoId: string | number) => {
    router.push(`/photo/${photoId}?albumId=${albumId}`)
}

onMounted(() => {
    // 页面标题动画
    gsap.from(headerRef.value, {
        y: 30,
        opacity: 0,
        duration: 1,
        ease: 'power3.out'
    })

    // 相册卡片动画
    albumRefs.value.forEach((album, index) => {
        gsap.from(album, {
            y: 50,
            opacity: 0,
            duration: 0.8,
            delay: 0.2 + index * 0.1,
            ease: 'power3.out'
        })
    })
})

// 鼠标悬停时的视差效果
const handleMouseMove = (event: MouseEvent, index: number) => {
    if (!albumRefs.value[index]) return

    const card = albumRefs.value[index]
    const rect = (card as HTMLElement).getBoundingClientRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top

    const centerX = rect.width / 2
    const centerY = rect.height / 2

    const deltaX = (x - centerX) / centerX
    const deltaY = (y - centerY) / centerY

    gsap.to(card, {
        rotationY: deltaX * 10,
        rotationX: -deltaY * 10,
        transformPerspective: 1000,
        duration: 0.5,
        ease: 'power2.out'
    })

    // 内部元素的视差效果
    const cardImage = (card as HTMLElement).querySelector('.album-cover')
    const cardContent = (card as HTMLElement).querySelector('.album-info')

    gsap.to(cardImage, {
        x: deltaX * 15,
        y: deltaY * 15,
        duration: 0.5,
        ease: 'power2.out'
    })

    gsap.to(cardContent, {
        x: deltaX * 5,
        y: deltaY * 5,
        duration: 0.5,
        ease: 'power2.out'
    })
}

const handleMouseLeave = (index: number) => {
    if (!albumRefs.value[index]) return

    const card = albumRefs.value[index]

    gsap.to(card, {
        rotationY: 0,
        rotationX: 0,
        duration: 0.5,
        ease: 'power2.out'
    })

    // 重置内部元素
    const cardImage = (card as HTMLElement).querySelector('.album-cover')
    const cardContent = (card as HTMLElement).querySelector('.album-info')

    gsap.to([cardImage, cardContent], {
        x: 0,
        y: 0,
        duration: 0.5,
        ease: 'power2.out'
    })
}
</script>

<template>
    <div class="gallery-container">
        <div class="gallery-header" ref="headerRef">
            <h1>我的相册集</h1>
            <p>探索我的摄影作品，每一张照片都有一个故事</p>
        </div>

        <div class="albums-grid">
            <div v-for="(album, index) in albums" :key="album.id" class="album-card" ref="albumRefs[index]"
                @mousemove="(e) => handleMouseMove(e, index)" @mouseleave="() => handleMouseLeave(index)">
                <div class="album-cover" :style="{ backgroundImage: `url(${album.cover})` }">
                    <div class="album-overlay">
                        <span class="photo-count">{{ album.photos.length }} 张照片</span>
                    </div>
                </div>
                <div class="album-info">
                    <h2>{{ album.title }}</h2>
                    <p>{{ album.description }}</p>
                    <span class="album-date">{{ album.date }}</span>

                    <div class="album-photos">
                        <div v-for="photo in album.photos.slice(0, 3)" :key="photo.id" class="album-photo-preview"
                            :style="{ backgroundImage: `url(${photo.url})` }"
                            @click="navigateToPhoto(album.id, photo.id)"></div>
                        <div v-if="album.photos.length > 3" class="album-photo-more"
                            @click="router.push(`/gallery/${album.id}`)">
                            +{{ album.photos.length - 3 }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.gallery-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
}

.gallery-header {
    text-align: center;
    margin-bottom: 4rem;
}

.gallery-header h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--color-heading);
}

.gallery-header p {
    font-size: 1.2rem;
    color: var(--color-text);
    max-width: 600px;
    margin: 0 auto;
}

.albums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2.5rem;
}

.album-card {
    background-color: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    transform-style: preserve-3d;
}

.album-cover {
    height: 250px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.album-cover:not([style*="url"]) {
    background-color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.album-cover:not([style*="url"])::after {
    content: '图片加载中';
    color: #999;
}

.album-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
}

.photo-count {
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
}

.album-info {
    padding: 1.5rem;
}

.album-info h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-heading);
}

.album-info p {
    color: var(--color-text);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.album-date {
    display: block;
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.album-photos {
    display: flex;
    gap: 0.5rem;
}

.album-photo-preview {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.album-photo-preview:not([style*="url"]) {
    background-color: #f0f0f0;
}

.album-photo-preview:hover {
    transform: scale(1.05);
}

.album-photo-more {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    transition: background-color 0.2s;
}

.album-photo-more:hover {
    background-color: #e0e0e0;
}

@media (max-width: 768px) {
    .gallery-header h1 {
        font-size: 2.5rem;
    }

    .albums-grid {
        grid-template-columns: 1fr;
    }
}
</style>